<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <title>用户审批记录列表</title>
    <#include "/view/head.html"/>
    <style type="text/css">
        .table-class{
            width:90%;
            text-align: center;
            border:1px solid #afd9ee;
            margin:0 auto;
            margin-top: 50px;
        }
        .list-path{
            height: 50px;
            line-height: 50px;
            background-color: #9acfea;

        }
        table th{
            text-align: center;
        }
        table thead tr {
            background-color: #9acfea;
        }
        .table-query{
            /*height: 40px;*/
            /*width:80px;*/
            /*text-align: center;*/
            white-space:nowrap;

        }
        .go-back{
            float:right;
            margin-right: 30px;
        }
    </style>
    <script type="text/javascript">
        function query(dm){
            var val = $('#q').val();
            var sel = $('#approveStatus').val();
            location.href='${base}/approve/list.do?q='+val+'&approveStatus='+sel;
        }
    </script>
</head>
<body>
<#--<#include "/view/approveTop.html"/>-->

<div class="list-path" > <span style="margin-left: 50px;"><a href="${base}/approve/index.do"><span class="glyphicon glyphicon-home"></span> </i>用户审批信息列表</a> / 用户审批记录列表</span>
    <div style="float:right;margin-right: 40px;"><a class="btn btn-info" href="${base}/approve/list.do">返回上一级</a></div>
</div>
<div class="table-class">
    <!--<div class="table-query">-->

    <table class="table table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>创建时间</th>
            <th>审批时间</th>
            <th>审批状态</th>
            <th>显示状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#list list as c>
            <tr>
                <td>${1+c_index}</td>
                <td><#if (c.createtime)?? >${c.createtime?string('yyyy-MM-dd HH:mm')}</#if></td>
                <td><#if (c.approvetime)?? >${c.approvetime?string('yyyy-MM-dd HH:mm')}</#if></td>
                <td>
                    <#if c.approveStatus??>
                        <#if 0==c.approveStatus><span class="label label-default">待审批中</span></#if>
                        <#if 1==c.approveStatus><span class="label label-success">审批通过</span></#if>
                        <#if 2==c.approveStatus><span class="label label-danger">审批不通过</span></#if>
                    </#if>
                </td>
                <td>

                    <#if c.isuse??>

                        <div class="dropdown" style="text-align: center;">
                                <a class="btn dropdown-toggle isuse-a" id="dropdownMenu${1+c_index}"
                                    data-toggle="dropdown" style="width: 100%">
                                    <#if 0==c.isuse><span class="label label-default">未显示</span></#if>
                                    <#if 1==c.isuse><span class="label label-success">显示</span></#if>
                                    <span class="caret"></span>
                                    <input type="hidden" class="userapproveId" value="${c.userapproveId!}"/>
                                    <input type="hidden" class="isuse" value="${c.isuse!}"/>
                                </a>
                                <ul class="dropdown-menu" role="menu" style="width: 100%;text-align: center"  aria-labelledby="dropdownMenu${1+c_index}">
                                    <li role="presentation" >
                                        <#if 0==c.isuse> <a href="javascript:use('dropdownMenu${1+c_index}')"><span class="label label-success">显示</span></a></#if>
                                        <#if 1==c.isuse> <a href="javascript:use('dropdownMenu${1+c_index}')"><span class="label label-default">未显示</span></a></#if>

                                    </li>

                                </ul>
                        </div>



                    </#if>

                </td>
                <td>
                    <a href="${base}/approve/detail.do?id=${c.userapproveId}" class="btn btn-link">详情</a>
                </td>

            </tr>


        </#list>
        <#if list?size==0>
            <tr>
                <td colspan="7" style="color: red"> 没有相关数据 </td>
            </tr>
        </#if>




        </tbody>
    </table>

</div>
<script type="text/javascript">
    function use(id){
        $(".close").click();
        var dom = $('#'+id);
        var userapproveId = $('#'+id+' .userapproveId').val();
        var isuseOr = $('#'+id+' .isuse').val();
        var isuse = '0';
        if(isuseOr=='1') {
            isuse='0';
        }else{
            isuse='1';
        }
        $.ajax({
            type: "GET",
            url: "${base}/approve/isuse.do",
            data: {
                id:userapproveId,
                status:isuse},
            dataType: "json",
            success: function(data){
                if(data.status=='1'){
                    $('.table-class').prepend('<div class="alert alert-success myAlert">'+
                    '<a href="#" class="close" data-dismiss="alert">&times;</a>修改显示状态成功。 </div>'
                    );
                    $('.isuse-a .label').remove();
                    $('.isuse-a').siblings('ul').find('a').html('');
                    $('.isuse-a .isuse').val('0');
                    $('.isuse-a').siblings('ul').find('a').html('<span class="label label-success">显示</span>');
                    $('.isuse-a').prepend('<span class="label label-default">未显示</span>');
                    if(isuseOr=='1') {
                        $('#' + id + ' .isuse').val('0');
                    }else{
                        $('#' + id + ' .isuse').val('1');
                    }


                    $('#'+id+' .label').remove();
                    if(isuse=='0'){
                        $('#'+id).siblings('ul').find('a').html('');
                        $('#'+id).siblings('ul').find('a').html('<span class="label label-success">显示</span>');
                        $('#'+id).prepend('<span class="label label-default">未显示</span>')
                    }else{
                        $('#'+id).siblings('ul').find('a').html('');
                        $('#'+id).siblings('ul').find('a').html('<span class="label label-default">未显示</span>');
                        $('#'+id).prepend('<span class="label label-success">显示</span>')



                    }



                }else{
                    $('.table-class').prepend('<div class="alert alert-warning myAlert">'+
                        '<a href="#" class="close" data-dismiss="alert">&times;</a>修改显示状态失败。 '+data.msg+'</div>'
                    );
                }

            },
            error:function(){
//                $(".myAlert").alert();
                $('.table-class').prepend('<div class="alert alert-warning myAlert">'+
                    '<a href="#" class="close" data-dismiss="alert">&times;</a>修改显示状态失败！ </div>'
                );
            }

        })
    }
   /* $(function(){
        $(".close").click(function(){
            $(".myAlert").alert();
        });
    });*/
</script>
</body>
</html>